#my-map {
    transition-duration: 0.5s;
    height: 34px;
    // width: 280px;

    .map-btn{
        // border: 1px solid #E2E2E2;
        input, i{
            cursor: pointer;
        }
        input{
            border-color: #E2E2E2 !important;
            // border: 0.5px solid #E2E2E2 !important;
        }
    }
    
    .map-main{
        transition-duration: 0.5s;

        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.55);
        overflow: auto;
        z-index: 998;

        display: flex;
        flex-direction: column;
        align-items: center;

        padding-top: 10px;

        #container{
            width: 800px; height: 500px;

            border: 5px solid #fff;
        }

        .map-footer{
            width: 800px; 
            display: flex; 
            justify-content: center;
            background-color: #fff;
            padding-bottom: 5px;
            button:last-child{
                margin-left: 50px;
            }
        }

        .form-ipt{
            width: 800px;
            display: flex;
            justify-content: space-between;
            position: absolute;
            top: 20px;
            z-index: 1;
            padding: 0 20px;
            
            .form-ipt-left{
                height: 32px;
                display: flex;
                justify-content: center;
                input{
                    // border-top-right-radius: 0;
                    // border-bottom-right-radius: 0;
                    // border-right: 0;
                    width: 296px;
                }
                // button{
                //     border-top-left-radius: 0;
                //     border-bottom-left-radius: 0;
                // }
            }

            i{
                font-size: 20px;
                cursor: pointer;
            }
            
        }
    }
}
